<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        
        .myView {
            width: 500px;
            height: 200px;
            margin: 0 auto;
            border: 1px solid black;
            position: relative;
            top: 100px;
            overflow: hidden;
            box-shadow: 5px 5px 5px 5px gray;
        }
        
        #slide {
            width: 2000px;
            height: 500px;
            transition: transform 1s;
        }
        
        #slide img {
            width: 500px;
            height: 200px;
        }
        
        .prev,
        .next {
            font-size: 30px;
            color: white;
            position: absolute;
            top: 53%;
            margin-top: -25px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .prev:hover,
        .next:hover {
            background: gray;
            opacity: 0.8;
        }
        
        .prev {
            left: 10px;
        }
        
        .next {
            right: 10px;
        }
        
        .pointer {
            position: absolute;
            bottom: 0px;
            left: 50%;
            margin-left: -50px;
        }
        
        .button {
            display: inline-block;
            width: 13px;
            height: 13px;
            border-radius: 50%;
            margin: 0 5px;
            cursor: pointer;
            border: 1px solid #000;
            box-sizing: border-box;
        }
    </style>
</head>

<body>
    <div class="myView">
        <div id="slide">
            <img src="img/01.jpg" class="slide"><img src="img/02.jpg" class="slide"><img src="img/03.jpg" class="slide"><img src="img/04.jpg" class="slide">
        </div>
        <div class="prev" onclick="prevPic()">&lt;</div>
        <div class="next" onclick="nextPic()">&gt;</div>
        <div class="pointer">
            <span class="button" index="0" style="background: pink;transform: scale(1.3);"></span>
            <span class="button" index="1"></span>
            <span class="button" index="2"></span>
            <span class="button" index="3"></span>
        </div>
    </div>
    <script>
        let index = 0;
        let imgNum = 4;
        let imgWidth = 500;
        let slide = document.getElementById("slide");
        let btns = document.getElementsByClassName("button");
        let autoToggle = togglePic;
        //事件代理
        let pointer = document.getElementsByClassName("pointer");
        pointer[0].addEventListener('click', function(e) {
            let targetIndex = e.target.getAttribute('index');
            if (targetIndex) {
                translatePic(targetIndex);
                index = targetIndex;
            }
        })

        function translatePic(index) {
            slide.style.transform = `translateX(-${index*imgWidth}px)`;
            for (let i = 0; l = btns.length, i < l; i++) {
                if (i == index) {
                    btns[i].style.background = "pink";
                    btns[i].style.transform = "scale(1.3)";
                    btns[i].style.transition = "none";
                } else {
                    btns[i].style.background = "transparent";
                    btns[i].style.transform = "scale(1)"
                    btns[i].style.transition = "transform 1s";
                }
            }
        }

        function togglePic() {
            if (index == imgNum - 1) {
                index = 0;
            } else {
                index++;
            }
            translatePic(index);
        }

        function prevPic() {
            if (index < 1) {
                index = imgNum - 1;
            } else {
                index--;
            }
            translatePic(index);
        }

        function nextPic() {
            if (index == imgNum - 1) {
                index = 0;
            } else {
                index++;
            }
            translatePic(index);
        }
    </script>
</body>

</html>